<template>
  <el-dialog
    :model-value="dialogVisible"
    :destroy-on-close="true"
    :title="dialogTitle"
    width="600px"
    @close="closeDialog"
  >
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules">
      <div v-if="dialogForm.source == 'boc'">
        <el-form-item
          v-if="dialogForm.source == 'boc'"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="dialogForm.boc_select"
            @change="setPriceValue"
            placeholder="中国银行外汇牌价"
            style="width: 80%"
          >
            <el-option
              :key="dialogForm.se_ask"
              :value="dialogForm.se_ask"
              :label="
                '现汇卖出价：1 ' +
                dialogForm.base_name +
                ' = ' +
                dialogForm.se_ask +
                ' ' +
                dialogForm.quote_name
              "
              selected="selected"
            ></el-option>
            <el-option
              :key="dialogForm.se_bid"
              :value="dialogForm.se_bid"
              :label="
                '现汇买入价：1 ' +
                dialogForm.base_name +
                ' = ' +
                dialogForm.se_bid +
                ' ' +
                dialogForm.quote_name
              "
            ></el-option>
            <el-option
              :key="dialogForm.bn_ask"
              :value="dialogForm.bn_ask"
              :label="
                '现钞卖出价：1 ' +
                dialogForm.base_name +
                ' = ' +
                dialogForm.bn_ask +
                ' ' +
                dialogForm.quote_name
              "
            ></el-option>
            <el-option
              :key="dialogForm.bn_bid"
              :value="dialogForm.bn_bid"
              :label="
                '现钞买入价：1 ' +
                dialogForm.base_name +
                ' = ' +
                dialogForm.bn_bid +
                ' ' +
                dialogForm.quote_name
              "
            ></el-option>
            <el-option
              :key="dialogForm.boc_conv"
              :value="dialogForm.boc_conv"
              :label="
                '中行折算价：1 ' +
                dialogForm.base_name +
                ' = ' +
                dialogForm.boc_conv +
                ' ' +
                dialogForm.quote_name
              "
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
          <el-input
            :label-width="formLabelWidth"
            v-model="price"
            style="width: 80%"
            type="number"
          >
            <template #prepend>1 {{ dialogForm.base_currency }}</template>
            <template #append>{{ dialogForm.quote_currency }}</template>
          </el-input>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
          <!-- <h3> -->
          <!-- <strong>价格：1</strong> {{ dialogForm.base_currency }} = -->
          <el-input
            :label-width="formLabelWidth"
            v-model="price"
            style="width: 80%"
            type="number"
          >
            <template #prepend>1 {{ dialogForm.base_currency }}</template>
            <template #append>{{ dialogForm.quote_currency }}</template>
          </el-input>
          <!-- {{ dialogForm.quote_currency }}
          </h3> -->
        </el-form-item>
      </div>
      <el-form-item label="过期时间" :label-width="formLabelWidth">
        <el-date-picker
          clearable
          v-model="dialogForm.expire_time"
          type="datetime"
          placeholder="价格过期时间"
          style="width: 80%"
        />
      </el-form-item>
      <!-- <el-form-item
        v-for="(item, index) in merchantList"
        :key="index"
        :label-width="formLabelWidth"
        prop="merchantChecked"
      >
        <el-checkbox-group v-model="dialogForm.merchantChecked">
          <el-checkbox :key="item.merchant_id" :label="item.merchant_id">
            {{ item.name }} （商户ID：{{ item.merchant_id }}）
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item> -->
      <el-form-item label="商户" :label-width="formLabelWidth">
        <el-select
          v-model="dialogForm.merchantChecked"
          placeholder="选择商户"
          style="width: 80%"
          multiple
          collapse-tags
        >
          <el-option
            v-for="item in merchantList"
            :key="item.value"
            :label="`${item.name}（商户ID：${item.merchant_id}）`"
            :value="item.merchant_id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancel')">取消</el-button>
        <el-button
          type="primary"
          @click="submit(dialogForm)"
          :loading="btnLoading"
          >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { timestamp } from "@/utils/utils";
const dialogFormRef = ref(null);
const price = ref(null);
defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
  dialogForm: {
    type: Object,
    default: {
      merchantChecked: [],
      base_currency: "",
      quote_currency: "",
      price: "",
      initial_price: "",
      expire_time: "",
    },
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
  dialogTitle: {
    type: String,
    default: "",
  },
  merchantList: { type: Array, default: [] },
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);
// 校验
const rules = {
  price: [{ required: true, message: "请输入价格", trigger: "blur" }],
  merchantChecked: [{ required: true, message: "请选择商户", trigger: "blur" }],
};

const formLabelWidth = "80px";

const setPriceValue = (value) => {
  price.value = value;
};

// 提交
const submit = (dialogForm) => {
  dialogFormRef.value
    .validate()
    .then(async () => {
      try {
        const param = Object.assign(
          {},
          {
            base_currency: dialogForm.base_currency,
            quote_currency: dialogForm.quote_currency,
            merchant_checked: dialogForm.merchantChecked,
            price: price.value,
            initial_price:
              dialogForm.source == "boc"
                ? dialogForm.boc_select
                : dialogForm.initial_price,
            expire_time: timestamp(dialogForm.expire_time.valueOf()),
          }
        );
        emits("submitForm", param);
      } catch (error) {
        return false;
        //                console.log(error);
      }
    })
    .catch((error) => {
      return false;
      //            console.log(error);
    });
};
const closeDialog = () => {
  price.value = "";
  emits("closeDialog");
};
</script>
